<template>
  <div class="card-list" ref="list" >
    <el-input
      v-model="queryName"
      class="query-input"
      size="small"
      @keyup.enter.native="getData(1)"
      placeholder="请输入应用名称"
      >
      <i slot="suffix" @click="getData(1)" class="el-input__icon el-icon-search"></i>
    </el-input>
      <div class="card-list-content" v-loading.body="loading" element-loading-text="拼命加载中">
        <div class="card-add" v-if="listType===0">
          <div class="card-add-btn" @click="$emit('addAppByBlank')"><app-icon iconName="vcloud-zengjia" style="color:#336CFB"></app-icon><span>创建空白应用</span></div>
          <div class="card-add-btn" @click="$emit('addAppByLibrary')"><i class="el-icon-s-grid"></i><span>从应用库创建</span></div>
          <div class="card-add-btn" @click="$emit('addAppByImport')"><i class="el-icon-upload"></i><span>从本地导入</span></div>
        </div>
        <div v-for="(item,i) in appsList" :key="item.id" class="card-item" :class="{'card-item-hover':i===currentIndex}" @mouseenter="hoverIndex = i" @mouseleave="hoverIndex = -1" @click="$emit('itemClick',appsList[currentIndex])">
            <div class="card-item-img" :title="item.name">
              <img :src="item.dcBizIcon || require('@/assets/images/default.png')" draggable="false">
            </div>
            <div class="card-item-text" :title="item.name">
                <span>{{item.name}}</span>
                <div></div>
            </div>
            <div class="card-item-menu">
              <CardItemMenu :info="item" :menuList="menuList" :menuNameFilter="menuNameFilter" @menuClick="menuClick" @show="menuHoverIndex = i" @hide="menuHoverIndex = -1"/>  
            </div>
        </div>
        <i v-for="i in 10" :key="'zhanwei'+i" class="zhanwei"></i>
      </div>
      <el-pagination
        :hide-on-single-page="true"
        class="card-list-pagination"
        background
        prev-text="上一页"
        next-text="下一页"
        layout="prev, pager, next, slot"
        :page-size="pageSize"
        :total="total"
        :current-page.sync ="currentPage"
        @current-change="page=>getData(page)">
        <span style="color:rgba(153,153,153,1);">共{{total}}条记录</span>
      </el-pagination>
    <div v-if="!loading&&appsList.length===0" class="card-list-no-data">
      <img :src="require('@/assets/images/noData.png')" >
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
    import CardItemMenu from "./CardItemMenu.vue"
    export default {
        name: "CardList",
        components:{CardItemMenu},
        props:{
          listType:{
            type:Number,
            default:0
          },
          menuList:Array,
          pageSize:{
            type:Number,
            default:19
          },
          menuNameFilter:Function
        },
        data(){
          return{
            queryName:'',
            loading:true,
            hoverIndex:-1,
            menuHoverIndex:-1,
            showpPagination:false,
            appsList:[],
            total:0,
            currentPage:1
          }
        },
        computed:{
          currentIndex(){
            if(this.hoverIndex !== -1) return this.hoverIndex
            if(this.menuHoverIndex !== -1) return this.menuHoverIndex
            return -1
          }
        },
        created(){
          this.getData(1)
        },
        methods:{
          menuClick(name){
            const item = this.menuList.find(it=>it.name===name)
            const fn = item.callback
            if(!fn) return
            fn.call(this.$parent,this.appsList[this.currentIndex])
          },
          getData(page){
            this.loading = true
            if(page) this.currentPage = page
            const data = {
              page:this.currentPage,
              size:this.pageSize,
              data:{
                appName:this.queryName,
                type:this.listType
              }
            }
            console.log(data)
            this.api.getAppsList(data)
            .then(res => {
              this.appsList =res.data.data
              this.total = Number(res.data.total)
              this.$nextTick(()=>{
                this.loading = false
              })
            })
            .catch(err => {
              this.loading = false
              console.warn(err.msg)
            });
          }
        }
    };
</script>

<style lang="scss" scoped>
.card-list{
  height: 100%;
  display: flex;
  flex-direction: column;
  .card-list-content{
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    overflow-y: auto;
    flex: auto;
    .card-add,
    .card-item{
      width:220px;
      height:260px;
      margin: 30px 25px 30px 25px;
      background:rgba(255,255,255,1);
      border-radius:6px;
      flex: none;
      box-shadow:0px 5px 10px 0px rgba(0,0,0,0.05);
      border:1px solid rgba(219,223,230,1);
      transition:all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .card-add{
      display: flex;
      flex-direction:column;
      justify-content:space-around;
      .card-add-btn{
        width:180px;
        height:70px;
        border:1px solid rgba(239,243,249,1);
        background:rgba(239,243,249,1);
        border-radius:6px;
        color:rgba(0,0,0,1);
        display: flex;
        align-items: center;
        margin: 0 auto;
        cursor: pointer;
        i,svg{
          font-size: 24px;
          margin-right: 10px;
          margin-left: 20px;
          color: #336CFB;
        }
        span{
          font-size: 14px;
          font-weight:600;
        }
      }
      .card-add-btn:hover{
        background:rgba(255,255,255,1);
        border:1px solid rgba(51,112,255,1);
        span{
          color:rgba(51,108,251,1);
        }
      }
    }
    .card-item{
      cursor: pointer;
      .card-item-img{
        width:218px;
        height:200px;
        position: relative;
        img{
          object-fit: fill;
          height: 100%;
          width: 100%;
          border-radius: 6px 6px 0 0;
        }
      }
      .card-item-text{
        height: 58px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        span{
          flex-grow:1;
          height:22px;
          font-size:16px;
          font-weight:600;
          color:rgba(0,0,0,1);
          line-height:22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .card-item-menu{
        display: none;
        height: 55px;
        background:rgba(248,250,252,1);
        border-radius:0px 0px 6px 6px;
      }
      
    }
    &>i.zhanwei{
      width:220px;
      margin: 0 25px 0 25px;
    }
    .card-item.card-item-hover{
      height: 315px;
      margin-top: 5px;
      margin-bottom: 0px;
      box-shadow:0px 10px 40px 0px rgba(32,55,111,0.29),0px 5px 10px 0px rgba(0,0,0,0.05);
      border:1px solid rgba(51,108,251,1);
      .card-item-menu{
        display: flex !important;
      }
    }
  }
  .card-list-pagination {
    flex: 0 0 50px;
    font-size:14px;
    padding: 0;
    font-weight: 400;
    color:rgba(102,102,102,1);
    display: flex;
    justify-content: center;
    align-items: center;
    & /deep/ button{
      width:70px;
      height:36px;
      background:rgba(255,255,255,1);
      border:1px solid rgba(233,233,233,1);
      &:not(:disabled):hover {
        color: #409EFF;
      }
      span{
        font-size:14px;
        height: 36px;
        line-height: 36px;
      }
    }
    & /deep/ .el-pager li{
      width:34px;
      height:36px;
      line-height: 36px;
      background-color: #ffffff;
      border:1px solid rgba(233,233,233,1);
      margin: 0;
      &.active{
        background:#336CFB
      }
      & + li{
        border-left: none !important;
      }
    }
  }
  .query-input{
    width: 240px;
    position: fixed;
    top: 9px;
    right: 315px;
    & /deep/ .el-input__inner{
        box-sizing: border-box;
        border-radius: 24px;
        padding-left: 15px;
        padding-right: 30px;
    }
    & /deep/ .el-input__icon{
        font-size: 14px;
        cursor: pointer;
        &:hover{
            color: #409EFF;
        }
    }
  }
  .card-list-no-data{
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    div{
      position: relative;
      top: -25px;
      text-align: center;
      color: #5e7382;
    }
  }
}
</style>
